<template>
  <div class="comment_module-wrapper">
    <mivaAvatar class="u-face" v-bind="userInfo" />
    <div class="textarea-container">
      <router-link class="textarea-mask__item" to="/login" v-if="!token">
        请先
        <span class="login__btn">登录</span>
        后发表评论。
      </router-link>
      <textarea @keyup.enter="submit" :class="['ipt-txt',{'act-txt__item':token}]" :disabled="!isDisabled" :placeholder="placeholderShow" cols="80" name="msg" ref="textarea" rows="5" v-model="content" />
      <button :disabled="!isDisabled" @click="submit" class="comment-submit">{{sendBtnText}}</button>
    </div>
    <div class="comment-emoji" v-if="token">
      <i class="iconfont icon-pinglun1" />
      <span class="text">表情</span>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { Notification } from 'element-ui';
import { addReplyAPI } from '@/api/reply';

export default {
    name: 'ReplySendModule',
    props: {
        aid: {
            type: [Number, String],
            required: true,
        },
        root: [Number, String],
        parent: [Number, String],
        placeholder: {
            type: [Number, String],
            default: '',
        },
    },
    data() {
        return {
            sending: false,
            content: '',
        };
    },
    computed: {
        ...mapState('account', ['token', 'userInfo']),
        usedPlaceholder() {
            return this.placeholder || '请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。';
        },
        placeholderShow() {
            return this.token ? this.usedPlaceholder : '';
        },
        sendBtnText() {
            return this.sending ? '正在发表' : '发表评论';
        },
        isDisabled() {
            if (!this.token) return true;
            return !this.sending;
        },
    },
    methods: {
        async submit() {
            if (!this.token) return;
            const { aid, content, root, parent } = this;
            const restContent = parent === root ? content : this.placeholder + content;
            this.sending = true;
            const { code } = await addReplyAPI(aid, { content: restContent, root, parent });
            if (code !== 200) {
                Notification({
                    title: '评论发表失败',
                    type: 'error',
                    showClose: false,
                    offset: 60,
                });
                return;
            }
            this.sending = false;
            this.clearValue();
            this.$emit('success');
        },
        clearValue() {
            this.content = '';
        },
    },
};
</script>

<style lang="less">
.comment_module-wrapper {
  margin: 20px 0;
  box-sizing: content-box;
  .u-face {
    float: left;
    margin: 7px 0 0 5px;
    position: relative;
  }
  .textarea-container {
    position: relative;
    margin-left: 70px;
    margin-right: 80px;
    .textarea-mask__item {
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 1;
      transform: translate(-50%, -50%);
      &:hover .login__btn {
        background-color: @base_color_2;
        box-shadow: -5px 5px 0px @base_color;
      }
    }
    .login__btn {
      display: inline-block;
      margin: 5px;
      padding: 5px;
      color: #fff;
      background-color: @base_color;
      box-shadow: 5px -5px 0px @base_color_2;
      transition: all 0.3s;
      cursor: pointer;
    }
    .ipt-txt {
      display: inline-block;
      width: 100%;
      height: 65px;
      line-height: normal;
      padding: 5px 10px;
      box-sizing: border-box;
      border: 1px solid #e5e9ef;
      border-radius: 4px;
      overflow: auto;
      font-size: 12px;
      transition: 0s;
      outline: none;
      resize: none;
      background-color: #f4f5f7;
      color: #555;
      &:focus {
        background-color: #fff;
        border-color: #00a1d6;
      }
    }
  }
  .act-txt__item:hover {
    .ipt-txt {
      background-color: #fff;
      border-color: #00a1d6;
    }
  }
  .comment-submit {
    width: 70px;
    min-width: 60px;
    height: 64px;
    padding: 4px 15px;
    position: absolute;
    right: -80px;
    top: 0;
    font-size: 14px;
    text-align: center;
    vertical-align: top;
    border: 1px solid @base_color;
    border-radius: 4px;
    transition: 0.1s;
    outline: none;
    background-color: @base_color;
    color: #fff;
    user-select: none;
    cursor: pointer;
  }
  .comment-emoji {
    margin: 10px 0 0 70px;
    padding: 3px 10px;
    display: inline-block;
    position: relative;
    z-index: 1;
    font-size: 12px;
    text-align: center;
    cursor: pointer;
    color: #fff;
    background-color: @base_color;
    box-shadow: 5px -5px 0px @base_color_2;
    transition: all 0.3s;
    &:hover {
      background-color: @base_color_2;
      box-shadow: -5px 5px 0px @base_color;
    }
    .iconfont {
      vertical-align: middle;
      margin-right: 5px;
    }
  }
}
</style>
